<template>
  <el-dialog
    title=""
    :visible.sync="centerDialogVisibleOn"
    :before-close="onClose"
    width="60%"
    center>
    <baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="handler">
      <bm-marker :position="center"
                 :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
        <bm-label :content="onGPSRow.customerName"
                  :labelStyle="{color: '#1565C0', fontSize : '14px'}"
                  :offset="{width: -35, height: 30}"/>
      </bm-marker>
    </baidu-map>
  </el-dialog>
</template>

<script>
    export default {
        name: "crm-cus-visit-map",
      data(){
          return{
            center: {lng: 0, lat: 0},
            zoom: 3,
            centerDialogVisibleOn:false
          }
      },
      props:['onGPSRow','centerDialogVisible'],
      mounted(){
        this.$nextTick(()=>{
            this.centerDialogVisibleOn = this.centerDialogVisible;
        })
      },
      methods:{
        handler ({BMap, map}) {
          let GPS = this.onGPSRow.gps.split(',') || [];
          this.center.lng = parseFloat(GPS[1]) || 116.404;
          this.center.lat = parseFloat(GPS[0]) || 39.915;
          this.zoom = 15
        },
        onClose(){
          this.$emit('onCenterDialogVisible',0);
        }
      }
    }
</script>

<style scoped>
  .bm-view {
    width: 100%;
    height: 400px;
  }
</style>
